<weui-infiniteloader (loadmore)="onLoadMore($event)" [config]="{percent:90}">
<weui-navbar>
  <weui-tab heading="淘宝订单" (select)="onSelect(1)">
    <ng-container *ngIf="search.type==1;then tabView"></ng-container>
  </weui-tab>
  <weui-tab heading="京东订单" (select)="onSelect(2)">
    <ng-container *ngIf="search.type==2;then tabView"></ng-container>
  </weui-tab>
  <weui-tab heading="拼多多订单" (select)="onSelect(3)">
    <ng-container *ngIf="search.type==3;then tabView"></ng-container>
  </weui-tab>
</weui-navbar>
</weui-infiniteloader>
<ng-template #tabView>
    <div class="weui-cell" style="background-color: #efeff4;">
      <weui-searchbar class="weui-cell__bd" (search)="onSearch($event)" (submit)="onSearch($event)" (clear)="onClear()"
                      [placeholder]="'订单ID或商品名称'"></weui-searchbar>
      <div class="weui-cell__ft">
        <nz-switch [(ngModel)]="search.status" (ngModelChange)="loadPageModel()" nzCheckedChildren="结算"
                   nzUnCheckedChildren="全部"></nz-switch>
      </div>
    </div>
    <article class="weui-article">
      <ng-container *ngFor="let pageModel$ of pageModels">
        <ng-container *ngIf="pageModel$ |async as pageModel">
          <ng-container *ngIf="pageModel?._embedded?.orders;else noneOrder">
            <div class="weui-form-preview my-1" *ngFor="let item of pageModel?._embedded?.orders">
              <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">{item.tkStatus,plural,=3 {结算奖金} other {预计奖金}}:</label>
                  <em
                    class="weui-form-preview__value">{item.tkStatus,plural,=3 {{{item.totalCommissionFee|sharePreFee}}} other {{{item.pubSharePreFee|sharePreFee}}}}
                    元</em>
                </div>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">订单号:</label>
                  <span class="weui-form-preview__value">{{item.tradeId}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">商品名称:</label>
                  <span class="weui-form-preview__value">{{item.itemTitle}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">实付金额:</label>
                  <span class="weui-form-preview__value">{{item.alipayTotalPrice| currency : 'CNY'}}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">交易日期:</label>
                  <span class="weui-form-preview__value">{{item.createTime | date:'short'}}</span>
                </div>
                <div class="weui-form-preview__ft">
                  <label class="weui-form-preview__label">状&nbsp;&nbsp;&nbsp;&nbsp;态:</label>
                  <span class="weui-form-preview__value ml-auto" [ngClass]="{
                'text-warning':item.tkStatus>3,
                'text-success':item.tkStatus==3
                }">{item.tkStatus,plural,=3 {订单结算} other {等待结算}}</span>
                </div>
              </div>
            </div>
          </ng-container>
        </ng-container>
      </ng-container>
    </article>
</ng-template>

<ng-template #noneOrder>
  <div class="my-5 py-5">
    <weui-loadmore type="line"></weui-loadmore>
  </div>
</ng-template>

